<template>
  <el-dialog
    title="完工待检单详情"
    append-to-body
    destroy-on-close
    :close-on-press-escape="false"
    fullscreen
    v-if="visible"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="handleEditReset"
  >
    <div class="titleIcon">
      <i class="el-icon-vertical-bar avue-group__icon"></i>
      <h4>基本信息</h4>
    </div>
    <avue-form ref="basicInfoForm" v-model="basicInfoForm" :option="basicInfoOption"></avue-form>
    <div class="titleIcon">
      <i class="el-icon-vertical-bar avue-group__icon"></i>
      <h4>检验结果记录</h4>
    </div>
    <avue-form ref="inspectionResultsRecordForm" v-model="basicInfoForm" :option="inspectionResultsRecordOption" :upload-preview="uploadPreview">
      <!--      <template slot="attachments">-->
      <!--        <el-upload-->
      <!--          class="upload-demo"-->
      <!--          action="/api/blade-resource/oss/endpoint/put-file-attach"-->
      <!--          list-type="picture-card"-->
      <!--          disabled-->
      <!--          accept=".png,.jpeg,.jpg"-->
      <!--          :on-preview="handlePreview"-->
      <!--          :file-list="inspectionPictureList"-->
      <!--        >-->
      <!--          <i class="el-icon-plus"></i>-->
      <!--          <div slot="tip" class="el-upload__tip">只能上传png/jpeg/jpg文件</div>-->
      <!--        </el-upload>-->
      <!-- </div> -->
      <!--        <div v-if="dialogTitle === '详情' && JSON.stringify(form.CERT) != '[]'">-->
      <!--          <div>{{ form.CERTNAME }}</div>-->
      <!--          <el-button type="text" icon="el-icon-download" size="small" @click="handleDownload(form.CERT)">下载</el-button>-->
      <!--        </div>-->
      <!--      </template>-->
    </avue-form>
    <div class="titleIcon">
      <i class="el-icon-vertical-bar avue-group__icon"></i>
      <h4>异常记录</h4>
    </div>
    <avue-crud
      ref="bnormalRecordCrud"
      v-model="qmsInspectionExceptionVoListForm"
      :option="abnormalRecordOption"
      :data="basicInfoForm.qmsInspectionExceptionVoList"
      :before-open="beforeOpen"
    >
      <!--      <template slot-scope="{ row, index }" slot="menu">-->
      <!--        <el-button icon="el-icon-view" size="small" type="text" @click="abnormalRecordRowUpdate(row, 'view')">详情</el-button>-->
      <!--      </template>-->
    </avue-crud>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" icon="el-icon-delete" @click="handleEditReset">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDetail } from '@/api/quality/beforePackingWaitInspect';
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  name: 'viewInspect',
  data() {
    return {
      basicInfoForm: {},
      basicInfoOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 150,
        column: [
          {
            label: '检验单号',
            prop: 'documentNo',
            span: 8,
            disabled: true
          },
          {
            label: '检验类型',
            prop: 'sourceTypeName',
            span: 8,
            value: '完工检验',
            disabled: true
          },
          {
            label: '客户名称',
            prop: 'partnerName',
            span: 8,
            disabled: true
          },
          {
            label: '工单号',
            prop: 'sourceNo',
            span: 8,
            disabled: true
          },
          {
            label: '产品编码',
            prop: 'partNo',
            span: 8,
            disabled: true
          },
          {
            label: '产品名称',
            prop: 'partName',
            span: 8,
            disabled: true
          },
          {
            label: '产品型号',
            prop: 'partModel',
            span: 8,
            disabled: true
          },
          {
            label: '产线',
            prop: 'lineName',
            span: 8,
            disabled: true
          },
          {
            label: '工单计划数量',
            prop: 'workOrderQuantity',
            disabled: true,
            span: 8
          },
          {
            label: '工单完工数量',
            prop: 'workOrderCompletedQuantity',
            disabled: true,
            span: 8
          },
          {
            label: '报检时间',
            prop: 'createTime',
            span: 8,
            disabled: true
          },
          {
            label: '是否加急',
            prop: 'isUrgent',
            span: 8,
            type: 'select',
            dicData: [
              {
                label: '否',
                value: false
              },
              {
                label: '是',
                value: true
              }
            ],
            disabled: true
          },

          {
            label: '本次报检数量',
            prop: 'sendExamineQuantity',
            type: 'number',
            disabled: true,
            min: 0,
            span: 8
          },
          {
            label: '抽检数量',
            prop: 'examineQuantity',
            type: 'number',
            disabled: true,
            min: 0,
            span: 8,
            rules: [
              {
                required: true,
                message: '请输入本次抽检数量',
                trigger: 'blur'
              },
              {
                validator: this.validateQuantity,
                trigger: 'blur'
              }
            ]
          },
          {
            label: '检验人员',
            prop: 'examineByName',
            type: 'search',
            span: 8,
            disabled: true
          }
        ]
      },
      inspectionResultsRecordForm: {},
      qmsInspectionExceptionVoListForm: {},
      inspectionResultsRecordOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 150,
        column: [
          {
            label: '综合判断',
            prop: 'examineResult',
            span: 8,
            type: 'select',
            disabled: true,
            rules: [
              {
                required: true,
                message: '请选择 综合判断',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '不合格数量',
            prop: 'ngQuantity',
            span: 8,
            disabled: true
          },
          {
            label: '查看检验报告',
            prop: 'attachments',
            type: 'upload',
            dataType: 'object',
            disabled: true,
            row: true,
            span: 24,
            propsHttp: {
              url: 'link',
              name: 'originalName',
              res: 'data'
            },
            rules: [
              {
                required: true,
                message: '请上传检验报告',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            disabled: true,
            span: 24,
            maxRows: 3,
            minRows: 3
          }
        ]
      },
      abnormalRecordData: [],
      abnormalRecordOption: {
        height: '300',
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        indexLabel: '序号',
        selection: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: true,
        menu: true,
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 150,
        column: [
          {
            label: '产品序列号',
            prop: 'objectNo'
          },
          {
            label: '不良现象',
            prop: 'ngFailureName'
          },
          {
            label: '不良原因（大类）',
            prop: 'ngMainCauseName'
          },
          {
            label: '不良原因（小类）',
            prop: 'ngSubCauseName'
          },
          {
            label: '不良说明',
            prop: 'faultDescription'
          },
          {
            label: '改善措施',
            prop: 'improvementMeasure'
          },
          {
            label: '备注',
            prop: 'remark',
            span: 24
          },
          {
            label: '附件',
            prop: 'img',
            type: 'upload',
            dataType: 'string',
            listType: 'picture-card',
            span: 24,
            hide: true
          }
        ]
      },
      inspectionPictureList: []
    };
  },
  methods: {
    async getData(id) {
      try {
        const res = await getDetail(id);
        const data = res.data.data;
        this.basicInfoForm = data;
        this.basicInfoForm.attachments =
          (data.qmsInspectionAttachmentList.length &&
            data.qmsInspectionAttachmentList.map((item) => ({
              value: item.link,
              label: item.attachmentName
            }))) ||
          [];
        this.basicInfoForm.examineBy = this.basicInfoForm.examineBy ? this.basicInfoForm.examineBy : JSON.parse(localStorage.getItem('saber-userInfo')).content.user_id;
        this.basicInfoForm.examineByName = this.basicInfoForm.examineByName
          ? this.basicInfoForm.examineByName
          : JSON.parse(localStorage.getItem('saber-userInfo')).content.user_name;
        console.log(data);
      } catch (e) {
        console.log(e);
      } finally {
      }
    },
    handleEditReset() {
      this.inspectionPictureList = [];
      this.$emit('update:visible', false);
      this.$emit('closeDialog');
    },
    handlePreview(file) {
      let url = this._get(file, 'response.data.link', '');
      this.$ImagePreview([{ url: url ? url : file.url }], 0, {
        closeOnClickModal: false
      });
    },
    beforeOpen(done, type) {
      try {
        this.qmsInspectionExceptionVoListForm.img = this.qmsInspectionExceptionVoListForm.qmsInspectionAttachmentList.map((item) => item.link).join(',');
      } catch (e) {
        this.qmsInspectionExceptionVoListForm.img = '';
      }
      done();
    },
    uploadPreview(file, column, done) {
      if (file.isImage) {
        done();
      } else {
        window.open(file.url);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.titleIcon {
  display: flex;
  align-items: center;
}
::v-deep .avue-crud__menu {
  display: none;
}
</style>
